<template>
	<view class="tabbar-content">
		<view :class="{tabbar: true, checked: item.id == tabId}" v-for="item in tabList" :key="item.id" @click="changeTab(item)">
			{{item.name}}
		</view>
	</view>
</template>

<script>
	export default {
		name: "Tabbar",
		props: {
			tabId: {
				type: Number | String,
				default: -1
			}
		},
		data() {
			return {
				tabList: [
					{id: 1, name: '入库', routeName: 'purchase'},
					{id: 2, name: '出库', routeName: 'order'},
					{id: 3, name: '盘点', routeName: 'check'},
					{id: 4, name: '返库', routeName: 'relocation'},
					{id: 5, name: '空框', routeName: 'empty'},
					{id: 6, name: '任务', routeName: 'task'},
				]
			};
		},
		methods: {
			changeTab(item) {
				if (item.id === 2) {
					uni.navigateTo({
						url:`/pages/wms/out/${item.routeName}/${item.routeName}`
					})
				} else if(item.id === 6) {
					uni.navigateTo({
						url:`/pages/wms/detail?tabId=${item.id}&type=空框管理`
					})
				} else {
					uni.navigateTo({
						url:`/pages/wms/${item.routeName}/${item.routeName}`
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.tabbar-content {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		display: flex;
		height: 50px;
		border-top: 1px solid #dadadc;
		background-color: #f6f6f6;
		.tabbar {
			width: 150rpx;
			text-align: center;
			font-size: 16px;
			line-height: 50px;
			color: #337ab7;
		}
	}
	.checked {
    background-color: #8db6d0;
		color: #fff !important;
	}
</style>